<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Lumino - Dashboard</title>
<style>

	.body{
		background:#1B2246;
		}
	.subDiv{
        background-color: #1e2a4c;
    }
    .components{
        display: table;
        width: 100%;
        table-layout: fixed;
        border-spacing: 10px;
    }
    .component{
        display: table-cell;
    }
    table.engineSummaries td{
        text-align: center;
        font-family: "Microsoft YaHei";
        font-size: 16px;
        color: white;
        padding-top: 3px;
        padding-bottom: 3px;
    }
    tr.tableHead td{
        text-align: center;
        font-family: "Microsoft YaHei";
        font-size: 20px;
        color: white;
    }
	
	table.basetable td{
		text-align:center;
		font-size:12px;
		color:#FFFFFF;
		padding-bottom:3px;
		padding-top:3px
		}
	tr.basehead td{
	text-align: center;
	font-size: 14px;
	color: #FFFFFF
		}
	 tbody tr:nth-child(odd) {  
            background-color: #1E2A4C /* green, 10% alpha */  
        }  
        tbody tr:nth-child(even) {  
            background-color: #142540 /* red, 30% alpha */  
        }  
	a.basea hover{
		color:#FFFFFF;
		text-decoration:none;
		}
		
		.head-menu a:link{
			color:#FFF;
			text-decoration:none;
			}
			.head-menu a:active{
			color:#FFF;
			text-decoration:none;
			}
			.head-menu a:hover{
			color:#FFF;
			text-decoration:none;
			}
			
			.head-menu a:visited{
			color:#FFF;
			text-decoration:none;
			}
</style>


<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/datepicker3.css" rel="stylesheet">
<link href="css/styles.css" rel="stylesheet">

<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<script src="js/respond.min.js"></script>
<![endif]-->

</head>

<body style="background-color:#1B2246">
	<nav style="background-color:#142C51" class="navbar navbar-inverse navbar-fixed-top" role="navigation">
		<div class="container-fluid">
			<div class="navbar-header">
            <img src="img/logo.png" alt="LOGO" style="height:75px; padding:3px 15px 3px;">
            <font size="6" color="white" face="Microsoft YaHei" style="vertical-align: middle;">面向高端制造领域的大数据管理系统</font>

				<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#sidebar-collapse">
					<span class="sr-only">Toggle navigation</span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
				</button>
				<!--<a class="navbar-brand" href="#"><span>Lumino</span>Admin</a>-->
                <table style="margin-top: 28px;float: right">
	                <tr>
        	        	<td  bgcolor="#142C51" style="border:hidden;border-right: solid;border-right-color: #797979;padding: 0 10px 0 10px;"><font class="head-menu" color="#FFFFFF" size="5px" ><a href="index.html">首页</a></font></td>
    	                <td bgcolor="#142C51" style="border-right: solid;border-right-color: #797979;padding: 0 10px 0 10px;"><font color="#FFFFFF" size="3px" class="head-menu"><a href="datasource_1.html">数据源管理</a></font></td>
	                    <td bgcolor="#142C51" style="border-right: solid;border-right-color: #797979;padding: 0 10px 0 10px;"><font color="#FFFFFF" size="3px" class="head-menu"><a href="igenginemain.html">一体化管理引擎</a></font></td>
                    	<td bgcolor="#142C51"><font color="#FFFFFF" style="padding: 0 10px 0 10px;" size="3px" class="head-menu"><a href="operation.html">运维工具</a></font></td>
    	            </tr>
                </table>
			</div>
		</div><!-- /.container-fluid -->
	</nav>
    	<div class="subDiv" id="数据统计" style="position: relative; margin-top: 30px; margin-left: 2%; margin-right: 2%">
        <font color="white" face="Microsoft YaHei">数据统计</font>
        <div class="components">
            <div id="各类型数据占比" class="component">
                <font color="#99929c" face="Microsoft YaHei">各类型数据占比</font>
                <div class="components" id="canvasAndIntro">
                    <div class="component">
                        <div class="panel-body">
                            <div class="canvas-wrapper">
                                <canvas class="chart" id="pie-chart"></canvas>
                            </div>
                        </div>
                    </div>
                    <div class="component" style="width:20%; vertical-align: middle">
                        <div class="components">
                            <div style="width: 15px; height: 13px; background: #375e97" class="component"></div>
                            <div class="component">
                                <font size="2" color="white" face="Microsoft YaHei" style="vertical-align: middle; white-space: nowrap">时序数据</font>
                            </div>
                        </div>
                        <div class="components">
                            <div style="width: 15px; height: 13px; background: #fb6542" class="component"></div>
                            <div class="component">
                                <font size="2" color="white" face="Microsoft YaHei" style="vertical-align: middle; white-space: nowrap">图数据</font>
                            </div>
                        </div>
                        <div class="components">
                            <div style="width: 15px; height: 13px; background: #ffbb00" class="component"></div>
                            <div class="component">
                                <font size="2" color="white" face="Microsoft YaHei" style="vertical-align: middle; white-space: nowrap">关系数据</font>
                            </div>
                        </div>
                        <div class="components">
                            <div style="width: 15px; height: 13px; background: #a2c523" class="component"></div>
                            <div class="component">
                                <font size="2" color="white" face="Microsoft YaHei" style="vertical-align: middle; white-space: nowrap">键值数据</font>
                            </div>
                        </div>
                        <div class="components">
                            <div style="width: 15px; height: 13px; background: #2c7873" class="component"></div>
                            <div class="component">
                                <font size="2" color="white" face="Microsoft YaHei" style="vertical-align: middle; white-space: nowrap">非结构化数据</font>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="component" id="introductions" style="display: inline;">

                </div>
            </div>
            <div id="各数据源实例概览" style="margin-left: 10px; width: 61.8%" class="component">
                <font color="#99929c" face="Microsoft YaHei">各数据源实例概览</font>
                <div style="width:80%; margin-left:10%; margin-top: 10px" id="概览表">
                    <table class="engineSummaries" width = "100%">
                        <tr class="tableHead">
                            <td>数据引擎</td>
                            <td>基本概要</td>
                            <td>所占磁盘空间</td>
                        </tr>
                        <tr>
                            <td>时序数据引擎1</td>
                            <td>2个存储组，3000条时序</td>
                            <td>6.7G</td>
                        </tr>
                        <tr>
                            <td>关系引擎1</td>
                            <td>48个表，40000行</td>
                            <td>200M</td>
                        </tr>
                        <tr>
                            <td>时序数据引擎2</td>
                            <td>2个存储组，3000条时序</td>
                            <td>6.7G</td>
                        </tr>
                        <tr>
                            <td>关系引擎2</td>
                            <td>48个表，40000行</td>
                            <td>200M</td>
                        </tr>
                        <tr>
                            <td>时序数据引擎3</td>
                            <td>2个存储组，3000条时序</td>
                            <td>6.7G</td>
                        </tr>
                                                <tr>
                            <td>关系引擎2</td>
                            <td>48个表，40000行</td>
                            <td>200M</td>
                        </tr>
                        <tr>
                            <td>时序数据引擎3</td>
                            <td>2个存储组，3000条时序</td>
                            <td>6.7G</td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>
    </div>
    	
        
        
        <div class="subDiv" id="数据访问" style="position:relative; margin-top: 5px; margin-left: 2%; margin-right: 2%">
        <font color="white" face="Microsoft YaHei">数据访问</font>
        <div class="components">
            <div class="component" id="一体化引擎查询次数" style="width: 45%; padding-right: 15px">
                <div class="canvas-wrapper">
                    <canvas class="main-chart" id="line-chart" height="200" width="600" style="background: transparent"></canvas>
                </div>
            </div>
            <div class="component" id="各类数据源访问统计" style="width: 45%; padding-left: 15px">
                <div class="canvas-wrapper">
                    <canvas class="main-chart" id="bar-chart" height="200" width="600" style="background: transparent"></canvas>
                </div>
            </div>
        </div>
   	</div>
    
    
    <div class="subDiv" id="processes"  style="position:relative; margin-top: 5px; margin-left: 2%; margin-right: 2%"> <font color="white" face="Microsoft YaHei">进程组件信息</font>
    <div id="processInfos" >
        	<table class="basetable" style="width:100%">
            	<tr class="basehead">
                	<td>进程ID</td>
                    <td>进程状态</td>
                    <td>进程信息</td>
                    <td>运行时间</td>
                    <td>描述信息</td>
                </tr>
                <tr >
                	<td>24324</td>
                    <td>执行</td>
                    <td>IOTDB-SERVER</td>
                    <td>11小时25分钟</td>
                    <td>时序数据库IOTDB的服务器端</td>
                </tr>
                <tr >
                	<td>24324</td>
                    <td>执行</td>
                    <td>IOTDB-SERVER</td>
                    <td>11小时25分钟</td>
                    <td>时序数据库IOTDB的服务器端</td>
                </tr>
                <tr >
                	<td>24324</td>
                    <td>执行</td>
                    <td>IOTDB-SERVER</td>
                    <td>11小时25分钟</td>
                    <td>时序数据库IOTDB的服务器端</td>
                </tr>
                <tr>
                	<td>24324</td>
                    <td>执行</td>
                    <td>IOTDB-SERVER</td>
                    <td>11小时25分钟</td>
                    <td>时序数据库IOTDB的服务器端</td>
                </tr>
                <tr>
                	<td>24324</td>
                    <td>执行</td>
                    <td>IOTDB-SERVER</td>
                    <td>11小时25分钟</td>
                    <td>时序数据库IOTDB的服务器端</td>
                </tr>
                <tr>
                	<td>24324</td>
                    <td>执行</td>
                    <td>IOTDB-SERVER</td>
                    <td>11小时25分钟</td>
                    <td>时序数据库IOTDB的服务器端</td>
                </tr>
                <tr>
                	<td>24324</td>
                    <td>执行</td>
                    <td>IOTDB-SERVER</td>
                    <td>11小时25分钟</td>
                    <td>时序数据库IOTDB的服务器端</td>
                </tr>
                <tr>
                	<td>24324</td>
                    <td>执行</td>
                    <td>IOTDB-SERVER</td>
                    <td>11小时25分钟</td>
                    <td>时序数据库IOTDB的服务器端</td>
                </tr>
                
                
             
            </table>
        </div>
    
    </div>
        
        
        
        
        
        
        
        
    	
    
   
	
	<script src="js/jquery-1.11.1.min.js"></script>
	<script src="js/bootstrap.min.js"></script>
	<script src="js/chart.min.js"></script>
	<script src="js/chart-data.js"></script>
	<script src="js/easypiechart.js"></script>
	<script src="js/easypiechart-data.js"></script>
	<script src="js/bootstrap-datepicker.js"></script>
	<script>
		$('#calendar').datepicker({
		});

		!function ($) {
		    $(document).on("click","ul.nav li.parent > a > span.icon", function(){          
		        $(this).find('em:first').toggleClass("glyphicon-minus");      
		    }); 
		    $(".sidebar span.icon").find('em:first').addClass("glyphicon-plus");
		}(window.jQuery);

		$(window).on('resize', function () {
		  if ($(window).width() > 768) $('#sidebar-collapse').collapse('show')
		})
		$(window).on('resize', function () {
		  if ($(window).width() <= 767) $('#sidebar-collapse').collapse('hide')
		})
	</script>
    <script type="text/javascript">
    function load() {
        var dataRatioChart = document.getElementById("pie-chart").getContext("2d");
        window.myPie = new Chart(dataRatioChart).Pie(engineSummaries, {responsive : true});
        var visitCountChart = document.getElementById("line-chart").getContext("2d");
        window.myLine = new Chart(visitCountChart).Line(visitCount, {responsive: true});
        var engineVisitCountChart = document.getElementById("bar-chart").getContext("2d");
        window.myBar = new Chart(engineVisitCountChart).Bar(engineVisitCount, {responsive : true});
    }
    window.onload = load;
        
    var randomScalingFactor = function(){ return Math.round(Math.random()*1000)}; //For plotting line charts
    var engineSummaries = [
        {
			value: 100,
            color:"#375e97",
            highlight: "#375e97",
            label: "时序数据"
        },
		{
            value: 50,
            color: "#fb6542",
            highlight: "#fb6542",
            label: "图数据"
        },
		{
            value: 100,
            color: "#ffbb00",
            highlight: "#ffbb00",
            label: "关系数据"
        },
		{
            value: 120,
            color: "#a2c523",
            highlight: "#a2c523",
            label: "键值数据"
        },
        {
            value: 120,
            color: "#2c7873",
            highlight: "#2c7873",
            label: "非结构化数据"
        },
	];
        
    var visitCount = {
        labels : ["January","February","March","April","May","June","July"],
        datasets : [
		{
            label: "My First dataset",
            fillColor : "transparent",
            strokeColor : "red",
            pointColor : "red",
            pointStrokeColor : "black",
            pointHighlightFill : "red",
            pointHighlightStroke : "rgba(220,220,220,1)",
            data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()]
        }
        ]

    }
	var engineVisitCount = {
		labels : ["时序数据","图数据","非结构化数据","关系数据","键值数据"],
        datasets : [
		{
            fillColor : "#375e97",
            strokeColor : "#375e97",
            highlightFill: "rgba(220,220,220,0.75)",
            highlightStroke: "rgba(220,220,220,1)",
            data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()]
        }
        ]
	
    }
    </script>	
</body>

</html>
